<template>
<transition name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight">
  <div class='loginWrapper' v-loading="loading">
    <div class="loginMiddle">
        <div class="logoWrapper">
            <div class="topLeft" :style="{backgroundImage:`url(${logoImageUrl})`}" @click="handleGoHome()"></div>
            <div class="userDesc">会员登录</div>
        </div>
    </div>
    <div class="backImageWrapper" :style="{backgroundImage:`url(${backImageUrl})`}">
        <div class="backImageMiddle">
            <div class="loginShow">
                <div class="loginShowTitle">
                    <p>会员登录</p>
                    <p>━━━LOGIN━━━</p>
                </div>
                <div class="loginShowContent">
                    <el-form :model="loginForm" :rules="rules" ref="loginForm" style="margin-top: 40px;">
                        <el-form-item prop="account">
                            <el-input v-model="loginForm.account" placeholder="请输入手机号">
                                <template slot="prepend"><i class="icon iconfont icon-icon-"></i></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" :maxlength="16" :minlength="6">
                                <template slot="prepend"><i class="icon iconfont icon-mima"></i></template>
                            </el-input>
                        </el-form-item>
                        <div class="agreeText">
                            <div class="forgetPass" @click="handleForgetPass()">
                                忘记密码？
                            </div>
                            <div class="regeister" @click="handleGoRegeister()">
                                立即注册
                            </div>
                        </div>
                        <el-form-item>
                            <el-button type="primary" style="width: 100%; margin: 30px 0" @click="submitForm()">立即登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
    <div class="loginBottom">
       <span> © 2018 www.showapi.com ALL Rights Reserved. 中国联通集团 版权所有 贵ICP备14007554号</span>
    </div>
  </div>
</transition>
</template>

<script>
import logoImg from '@/assets/logo.png'
import loginBackground from '@/assets/img/user/loginBackground.jpg'
export default {
  name: 'Login',
  data () {
    return {
      loading: false,
      logoImageUrl: logoImg,
      backImageUrl: loginBackground,
      middeleBackHeight: 0,
      loginForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[0-9a-zA-Z]{6,16}$/, message: '密码6~16位由字母、数字、下划线组成', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
  },
  components: {
  },
  created () {
    document.title = '登录-API商城'
  },
  methods: {
    handleGoHome () {
      this.$router.push('/home')
    },
    handleGoRegeister () {
      this.$router.push('/regeister')
    },
    handleForgetPass () {
      this.$router.push('/forgetpass')
    },
    submitForm () {
      const _self = this
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          _self.loading = true
          _self.$http.post('/v1/login', _self.loginForm).then(result => {
            if (result.data.code === 200) {
              // 登陆成功，设置cookie
              this.$cookieStore.setCookie('userToken', result.data.data.token, 86400)
              _self.$localUser.set(result.data.data.user)
              _self.$message({
                showClose: true,
                message: result.data.message,
                type: 'success'
              })
              _self.$router.replace('/')
            } else {
              _self.$message({
                showClose: true,
                message: result.data.message,
                type: 'error'
              })
            }
            _self.loading = false
          }).catch(errMsg => {
            _self.loading = false
            _self.$message({
              showClose: true,
              message: errMsg,
              type: 'error'
            })
          })
        }
      })
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.loginWrapper {
  background-color #fff
  width 100%
  height 100vh
  overflow hidden
  .loginMiddle {
      padding 20px 0px
      display flex
      justify-content space-between
      width 1200px
      margin 0 auto
      .logoWrapper {
        display flex
        .topLeft {
            cursor pointer
            width 248px
            height 49px
            background-repeat: no-repeat;
            background-size: cover;
        }
        .userDesc {
            font-weight bolder
            font-size 22px
            line-height 49px
        }
      }
      .topRight {
          line-height 49px
          font-size 14px
          color #666
      }
  }
  .backImageWrapper {
      width 100%
      height 667px
      background-repeat: no-repeat;
      background-size: cover;
      .backImageMiddle {
          position relative
          width 1200px
          margin 0 auto
          .loginShow {
            position absolute
            width 400px
            height 400px
            background-color white
            top 125px
            right 0px
            .loginShowTitle {
                font-size 26px
                font-weight bold
                text-align center
                padding 30px 0px
            }
            .loginShowContent {
                padding 0px 60px 0px 60px
                margin-top -20px
                .agreeText {
                  display flex
                  justify-content space-between
                  .forgetPass {
                      cursor pointer
                      color $color-theme
                      font-size 12px
                  }
                  .regeister {
                      cursor pointer
                      color $color-theme
                      font-size 12px
                  }
                }
            }
          }
      }
  }
  .loginBottom {
      position fixed
      bottom 100px
      width 100%
      text-align center
      font-size 12px
      color #666
  }
}
</style>

<style>
.loginShowContent .el-input-group__append, .el-input-group__prepend {
    padding: 0px 10px
}

.loginShowContent .el-button--primary {
    background-color: #ED6D00;
    border-color: #ED6D00;
}
</style>
